<template>
  <div id="Tickettype" @mouseover="showset" @mouseout="hideset" :style="{color:moddata.config.fontcolor}" class="mod">
    <div>
      <div class="con">
        <div class="title" v-show="moddata.config.titleshow">
          <span>
            <i class="iconfont icon-icon-system-fi-ticket"></i>&nbsp;{{moddata.config.title}}</span>
        </div>
        <div class="text">
          <template>
            <el-table :data="comTabData" stripe style="width: 100%" :row-style="rowstyle">
              <el-table-column prop="Title" label="门票名称" width="100">
              </el-table-column>
              <el-table-column prop="Description" label="描述">
                <template scope="scope">
                  <span class="des" :title="scope.row.Description">{{scope.row.Description}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="TicketCount" label="剩余张数" width="120">
                <template scope="scope">
                  {{scope.row.TicketCount==0?'充足':(scope.row.TicketCount-scope.row.SoldNum)}}
                </template>
              </el-table-column>
              <el-table-column prop="Price" label="单价" width="120">
                <template scope="scope">
                  {{scope.row.Price | money}}
                </template>
              </el-table-column>
              <el-table-column label="数量" width="220">
                <template scope="scope">
                  <el-input-number v-model="scope.row.count" :min="0" :max="limnum(scope.row.LimitedNumber,scope.row.TicketCount,scope.row.SoldNum)"></el-input-number>
                </template>
              </el-table-column>
            </el-table>
            <div class="signupbox">
              <span class="sumprice">{{sum}}</span>
            </div>
            <div class="signupbox">
              <el-button type="danger" class="signupbtn" @click="signUp">我要报名</el-button>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">
        <i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod">
        <i class="el-icon-delete"></i> 删除</div>
    </div>
  </div>
</template>

<script>
  import {
    MessageBox
  } from 'element-ui'
  export default {
    props: ["moddata", "index", "taskdata"],
    data: function () {
      return {
        maskshow: false,
        // tableData: this.taskdata.AllTickets,
        rowstyle: {
          height: "80px"
        }
      }
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$store.commit({
          type: 'showsetbox',
          setMod: 'SetShowMod',
          index: this.index
        })
      },
      deletemod: function () {
        this.$store.dispatch('deleteMod', this.index)
      },
      signUp: function () {
        if (this.taskdata.IsEnd) {
          MessageBox.alert("报名截止，无法进行报名", "提示", {
            confirmButtonText: '确定'
          });
          return;
        }
        var tickets = [];
        this.tableData.forEach(function (item) {
          if (item.count != 0) {
            var ticket = {
              id: item.Id,
              title: item.Title,
              count: item.count,
              price: item.Price
            };
            tickets.push(ticket);
          }
        })
        if (tickets.length == 0) {
          MessageBox.alert("至少选择一张票据", "提示", {
            confirmButtonText: '确定'
          });
          return;
        }
        localStorage.setItem("ticketList", JSON.stringify(tickets));
        window.location = "/Event/Registration/FillInfo?_taskId_=" + this.tableData[0].TaskId;
      },
      limnum: function (num, sum, sold) {
        var residue;
        if (sum == 0) {
          residue = 9999;
        } else {
          residue = sum - sold;
        }
        if (this.taskdata.Mode == 2) {
          return 1
        } else {
          if (residue <= 0) {
            return 0;
          } else if (num == 0 || residue <= num) {
            return residue
          } else {
            return num
          }
        }
      }
    },
    filters: {
      money: function (num) {
        if (num == 0) {
          return "免费"
        } else {
          return "¥  " + Number(num).toFixed(2)
        }
      },
    },
    computed: {
      tableData(){
        return this.taskdata.AllTickets;
      },
      sum: function () {
        var sumber = 0;
        this.tableData.forEach(function (item) {
          sumber += item.Price * item.count;
        })
        return "¥  " + Number(sumber).toFixed(2);
      },
      comTabData() {
        var list = [];
        this.taskdata.AllTickets.forEach(function (item) {
          if (item.Enabled) {
            list.push(item)
          }
        })
        return list;
      }
    }
  }
</script>

<style scoped>
  .sumprice {
    float: right;
    font-size: 30px;
    font-weight: 600;
    color: #ff4949;
    padding: 10px 15px;
  }

  .signupbox {
    padding-right: 5px;
    overflow: hidden;
  }

  .signupbtn {
    float: right;
    margin-right: 10px;
  }

  .des {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>